<template>
  <div class="homenav">
    <ul>
      <li  v-for="(item,index) in homeNav" :key="index" @click="routerHandle(item.routername)">
        <p>{{item.title}}</p>
        <i class="iconfont" :class="item.icon"></i>
        <p>{{item.mark}}</p>
      </li>
    </ul>
    <div class="login-register" v-show="status">
      <button type="button" class="register" @click="registerHandle" >注册</button>
      <button type="button" class="login" @click="loginHandle" >登录</button>
    </div>
  </div>
</template>

<script>

export default {
  name: 'HomeNav',
  data(){
    return{
      homeNav:[
        {
          title:"乐章",
          icon:"icon-pengyouquan",
          mark:"MOVEMENT",
          routername:"Song"
        },
        {
          title:"听说",
          icon:"icon-erji",
          mark:"LISTENING",
          routername:"Listen"
        },
        {
          title:"乐趣",
          icon:"icon-icecream",
          mark:"INTERESTING",
          routername:"details"
        },
        {
          title:"聊聊",
          icon:"icon-xianxing_diantai",
          mark:"CHATING",
          routername:"Chat"
        },
        {
          title:"游记",
          icon:"icon-feijichang",
          mark:"TRAVELNOTE",
          routername:"details"
        },
        {
          title:"摄影",
          icon:"icon-xiangji",
          mark:"PHOTOGRAPHY",
          routername:"group"
        },
        {
          title:"诚品",
          mark:"ESLITE"
        },
        {
          title:"蓝莓酱",
          mark:"BLUEBERRY JAM",
          routername:"BlueberryPai"
        },
        {
          title:"社区",
          mark:"COMMUNITY",
          routername:"Community"
        }
      ]
    }
  },
  props:{
    status:{
      type:Boolean
    }
  },
  methods:{
    // 点击跳转相应页面
    routerHandle(routername){
      this.$router.push(routername)
    },
    // 跳转注册页面
    registerHandle(event){
      this.$router.push('Register')
    },
    // 跳转登录页面
    loginHandle(event){
      this.$router.push('Login')
    }
  }
}
</script>

<style scoped>
*{
  padding:0;
  margin: 0;
}
.homenav{
  border-top: 1px solid rgba(0,0,0,.2);
  box-shadow: 0 2px 0 #e5e5e5;
  background-color: #fff;
  font-size: 0.14rem;
  position: absolute;
  overflow: hidden;
  top: 0.6rem;
  width: 100%;
  z-index: 999;
}
.homenav ul li{
  position: relative;
  float: left;
  width: 33.3%;
}

.homenav ul li p
{
  height: 0.4rem;
  line-height: 0.4rem;
  box-sizing: border-box;
}
.login-register{
  background-color: #f5f5f5;
  height: 1rem;
}
.login-register button {
  color: #fff;
  font-size: 0.16rem;
  border-radius: 0.1rem;
  border: none;
  outline: none;
  width: 1rem;
  height: 0.5rem;
  margin: 0.25rem 0.2rem;
}
.login-register button:first-child{
  background-color: #109d59;
}
.login-register button:last-child{
  background-color: #24292c;
}
</style>
